<template>
    <span :style="fontStyle">{{ showStars }}</span>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
interface Props {
    value: number
    theme?: string
}
let props = defineProps<Props>()

const stars = '★★★★★☆☆☆☆☆'
const showStars = computed(() => stars.slice(5 - props?.value, 10 - props?.value))
const themeObj = {
    'red': '#f5222d',
    'orange': '#fa541c',
    'yellow': '#fadb14',
    'green': '#73d13d',
    'blue': '#40a9ff',
}
const fontStyle = computed(() => `color:${themeObj[props.theme]}`)
</script>